<template>
  <div class="manage-check">
    <div class="title-con">
      <div class="title">
        {{ $t('settlementDetail.tip1') }}
      </div>
      <div class="settlement-instructions">
        <el-tooltip
          class="item"
          effect="dark"
          placement="right"
        >
          <template #content>
            <div
              class="title-con-pit"
            >
              <p>{{ $t('settlementDetail.tip2_2') }}</p>
              <p>&nbsp;</p>
              <p>{{ $t('settlementDetail.tip2_3') }}</p>
              <p>{{ $t('settlementDetail.tip2_4') }}</p>
              <p>{{ $t('settlementDetail.tip2_5') }}</p>
              <p>{{ $t('settlementDetail.tip2_6') }}</p>
              <p>{{ $t('settlementDetail.tip2_7') }}</p>
              <p>{{ $t('settlementDetail.tip2_8') }}</p>
              <p>&nbsp;&nbsp;&nbsp;{{ $t('settlementDetail.tip2_9') }}</p>
              <p>&nbsp;&nbsp;&nbsp;{{ $t('settlementDetail.tip2_10') }}</p>
              <p>{{ $t('settlementDetail.tip2_11') }}</p>
              <p>&nbsp;&nbsp;&nbsp;{{ $t('settlementDetail.tip2_12') }}</p>
              <p>{{ $t('settlementDetail.tip2_13') }}</p>
              <p>&nbsp;&nbsp;&nbsp;{{ $t('settlementDetail.tip2_14') }}</p>
              <p>&nbsp;&nbsp;&nbsp;{{ $t('settlementDetail.tip2_15') }}</p>
              <p>{{ $t('settlementDetail.tip2_16') }}</p>
              <p>{{ $t('settlementDetail.tip2_17') }}</p>
              <p>{{ $t('settlementDetail.tip2_18') }}</p>
              <p>&nbsp;&nbsp;&nbsp;{{ $t('settlementDetail.tip2_19') }}</p>
              <p>{{ $t('settlementDetail.tip2_20') }}</p>
              <p>{{ $t('settlementDetail.tip2_21') }}</p>
              <p>{{ $t('settlementDetail.tip2_22') }}</p>
              <p>{{ $t('settlementDetail.tip2_23') }}</p>
              <p>{{ $t('settlementDetail.tip2_24') }}</p>
              <p>{{ $t('settlementDetail.tip2_25') }}</p>
              <p>{{ $t('settlementDetail.tip2_26') }}</p>
              <p>{{ $t('settlementDetail.tip2_27') }}</p>
              <p>{{ $t('settlementDetail.tip2_28') }}</p>
              <p>{{ $t('settlementDetail.tip2_29') }}</p>
              <p>{{ $t('settlementDetail.tip2_30') }}</p>
              <p>{{ $t('settlementDetail.tip2_31') }}</p>
              <p>&nbsp;&nbsp;&nbsp;{{ $t('settlementDetail.tip2_32') }}</p>
              <p>&nbsp;&nbsp;&nbsp;{{ $t('settlementDetail.tip2_33') }}</p>
            </div>
          </template>

          <span>{{ $t('settlementDetail.tip27') }}<el-icon><QuestionFilled /></el-icon></span>
        </el-tooltip>
      </div>
    </div>
    <div class="main-container">
      <div class="table-con">
        <el-table
          :data="data.tableData"
          row-key="id"
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          style="width: 100%"
        >
          <el-table-column
            fixed
            prop="shopName"
            :label="$t('shopProcess.shopName')"
            width="150"
          >
            <template #default="scope">
              <span class="table-cell-text">{{ scope.row.shopName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="prodName"
            :label="$t('product.prodName')"
            width="130"
          >
            <template #default="scope">
              <span class="table-cell-text">{{ scope.row.prodName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="categoryName"
            :label="$t('publics.category')"
            width="130"
          />

          <el-table-column
            prop="prodTotalAmount"
            :label="$t('settlementDetail.prodTotalAmount')"
            width="130"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.productTotalAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="actualTotal"
            :label="$t('chat.userPaymentAmount')"
            width="130"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.actualTotal }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="multishopReduce"
            :label="$t('settlementDetail.multishopReduce')"
            width="130"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.multishopReduce }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="platformShareReduce"
            :label="$t('settlementDetail.platformShareReduce')"
            width="130"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.platformShareReduce }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="distributionAmount"
            :label="$t('settlementDetail.distributionAmount')"
            width="130"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.distributionAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="useScore"
            :label="$t('settlementDetail.useScore')"
            width="130"
          />
          <el-table-column
            prop="rate"
            :label="$t('settlementDetail.rate')"
            width="130"
          >
            <template #default="scope">
              <span>{{ scope.row.rate }}%</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="platformCommission"
            :label="$t('shopWallet.platformCommission')"
            width="130"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.platformCommission }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="scoreAmount"
            :label="$t('settlementDetail.scoreAmount')"
            width="130"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.scoreAmount }}</span>
            </template>
          </el-table-column>
          <!-- 平台会员折扣 -->
          <el-table-column
            prop="memberAmount"
            :label="$t('settlementDetail.platMemberAmount')"
            width="130"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.memberAmount }}</span>
            </template>
          </el-table-column>
          <!-- 商城会员折扣 -->
          <el-table-column
            prop="shopMemberDiscountAmount"
            :label="$t('settlementDetail.shopMemberAmount')"
            width="130"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.shopMemberDiscountAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="platformCouponAmount"
            :label="$t('settlementDetail.platformCouponAmount')"
            width="160"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.platformCouponAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="shopCouponAmount"
            :label="$t('settlementDetail.shopCouponAmount')"
            width="160"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.shopCouponAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="discountAmount"
            :label="$t('settlementDetail.discountAmount')"
            width="130"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.discountAmount }}</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="comboAmount"
            :label="$t('settlementDetail.comboAmount')"
            width="130"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.comboAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="seckillAmount"
            :label="$t('settlementDetail.seckillAmount')"
            width="130"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.seckillAmount || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="groupAmount"
            :label="$t('settlementDetail.groupAmount')"
            width="130"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.groupAmount || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="shopChangeFreeAmount"
            :label="$t('settlementDetail.shopChangeFreeAmount')"
            width="130"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.shopChangeFreeAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="platformShopChangeAmount"
            :label="$t('settlementDetail.platformShopChangeAmount')"
            width="140"
            align="center"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.platformShopChangeAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="refundAmount"
            :label="$t('settlementDetail.refundAmount')"
            width="130"
          >
            <template #default="scope">
              <span>￥ {{ scope.row.refundAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="refundCount"
            :label="$t('settlementDetail.refundCount')"
            width="130"
          >
            <template #default="scope">
              <span>{{ scope.row.refundCount || 0 }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div
        v-if="data.freightAmount !== 0"
        class="message"
      >
        <span>{{ $t('publics.freight') }}：{{ data.freightAmount }} {{ $t('transport.yuan') }}</span>
      </div>
      <div
        v-if="data.freeFreightAmount !== 0"
        class="message"
      >
        <span>{{ $t('settlementDetail.freeFreightAmount') }}：{{ data.freeFreightAmount > 0 ? '+':'' }}{{ data.freeFreightAmount }}  {{ $t('transport.yuan') }}
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('settlementDetail.freeFreightAmountTips')"
            placement="top"
          >
            <span style="font-size:14px;color:#46a6ff;cursor:pointer;">
              <el-icon><QuestionFilled /></el-icon>
            </span>
          </el-tooltip>
        </span>
      </div>
      <div
        v-if="data.platformFreeFreightAmount !== 0"
        class="message"
      >
        <span>{{ $t('settlementDetail.platformFreeFreightAmount') }}：{{ data.platformFreeFreightAmount }} {{ $t('transport.yuan') }}
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('settlementDetail.platformFreeFreightAmountTips')"
            placement="top"
          >
            <span style="font-size:14px;color:#46a6ff;cursor:pointer;">
              <el-icon><QuestionFilled /></el-icon>
            </span>
          </el-tooltip>
        </span>
      </div>
      <div class="back">
        <div
          class="default-btn"
          @click="back"
        >
          {{ $t('shopFeature.edit.back') }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

const route = useRoute()
const router = useRouter()

const Data = reactive({
  time: '',
  activeName: 'first',
  total: 0,
  orderNumber: route.query.orderNumber,
  path: route.query.path,
  refundSn: route.query.refundSn || '',
  reason: route.query.reason,
  params: {
    pageNum: 1,
    pageSize: 10
  },
  data: {
    freightAmount: 0,
    tableData: []
  }
})

const { data } = toRefs(Data)

onMounted(() => {
  getData(Data.orderNumber, Data.refundSn, Data.reason)
})

// 获取订单详情
const getData = (orderNumber, refundSn, reason) => {
  http({
    url: http.adornUrl('/platform/order_item/get_order_detail'),
    method: 'get',
    params: { orderNumber, refundSn, reason }
  }).then(({ data }) => {
    Data.data.freightAmount = data.freightAmount
    Data.data.freeFreightAmount = data.freeFreightAmount ? data.freeFreightAmount : 0
    Data.data.platformFreeFreightAmount = data.platformFreeFreightAmount ? data.platformFreeFreightAmount : 0
    Data.data.tableData = data.orderItemDetailList
  })
}

const back = () => {
  router.back()
}
</script>

<style lang="scss" scoped>
 .manage-check {
   .title-con {
      display: flex;
      justify-content: space-between;
    .title {
      font-size: 16px;
      font-weight: bold;
    }
    .settlement-instructions {
      color: #155bd4;
    }
   }
  .message {
    margin: 20px 0;
    span {
      font-size: 14px;
      margin-right: 60px;
    }
  }
 }
.title-con-pit>p{
  margin: 1em 0;
}
.title-con-pit{
  max-height:80vh ;
  max-width: 80vw;
  overflow-y: auto;
}
</style>
